<template>
    <el-row class="contentContainer">
        <el-col :span="24" class="breadcrumbContainer">
            <el-breadcrumb separator="/" class="breadcrumbInner">
                <el-breadcrumb-item  v-for="item in routeMatched" :key="item.path">
                    {{item.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
            <el-col :span="21">
                <strong class="title">{{$route.name}}</strong>
            </el-col>
            <el-col :span="3">
                <slot name="button"></slot>
            </el-col>
            <slot></slot>
        </el-col>
    </el-row>
</template>
<script>
    
    export default {
        data(){
            return{
            }
        },
        computed:{
            routeMatched:function(){
                return this.$route.matched.slice(1,);
            }
        }
    }
</script>
<style scoped lang="scss">
    .contentContainer {
        background-color: rgba($color:#2481B8, $alpha:0.7);
        padding: 20px;
        .breadcrumbContainer {
            .title {
                font-size: 16px;
                color: #fff;
            }
            .breadcrumbInner{
                margin-bottom: 20px;
            }
        }
        .content-wrapper {
            background-color: #fff;
            box-sizing: border-box;
        }
    }
</style>